<template>
    <div>
              <div @click="show = !show" style="height: 100%;width: 100%; position: fixed; top: 0%; z-index: 999;" v-if="show">
                 </div>
              <comms   :id="cid" :show="show" class="coms"></comms>
           
        <!-- 详情信息列表循环 -->
        <div class="Infomation" style="margin-top:0rem;overflow:scroll" >
  
            <div class="info-item" v-for="(item,index) in list" > <!-- 一条详情，遍历此 -->
                <div class="item-header">
                    <div class="item-header-logo"><img :src="item.icon" /></div>
                    <div class="item-header-namedata">
                        <div class="name">{{item.nickname}}</div>
                        <div class="data">{{item.createtime}}</div>
                    </div>
                    <div class="item-header-rightdot">
                        <div class="nianji">{{item.classname}}</div>
                        <div class="dangban">当班</div>
                    </div>
                </div>

                <div class="item-desc" v-for="(items,index) in item.content">
                      {{items.flag}}:{{items.content}}
                </div>
                <label v-show="ifShowContent" @click="clickshowcontent" style="display:block;color:#259E7B; margin:10px 0;">{{ShowContent}}</label>

                <div class="item-img">
                     <div class="item-imglist" v-for="(items,index) in item.pic" :key="items.index"><img :src="items"  @click="ShowbigImg(items)"/></div>
                </div>
            

                <div class="item-remark">
                    <div class="dianzan"  :data="dataStatus" @click="ClickDianzan(item.isdianzan,item.id)"  style="margin-right:15px;"><van-icon name="like" v-bind:class="{ red: item.isdianzan==1? true :false }"  /><label>{{item.dianzan  }}</label></div>
                    <div class="pinglun" @click="commen(item.id)"><van-icon name="chat" /><label>{{item.comment.length}}</label></div>
                </div>


                <div class="item-commentreply" v-if="item.comment==''? false : true" > <!-- v-if="showpinglun" 通过数组的返回长度是否显示评论区 -->
                  <app-replay :list="item.comment" :id="item.id"></app-replay>  <!--commons 评论回复组件 -->

                </div>

            </div>


        </div>


    </div>

</template>

<script>
import { ImagePreview } from 'vant';
import AppReplay from '@/pages/Commons/Replay.vue'
import axios from 'axios';
import  comms from '@/pages/Commons/Comment.vue'
 import event from '@/pages/Commons/event.js'
import Axios from 'axios';
export default {
    name: 'WorldIndex',
     components: {
        AppReplay,comms
    },

    data () {
        return {
            // icon: '▶',
            ShowContent: '查看全文 ↓',
            ifShowContent: false,
            DianzanNum: 0,
            dataStatus: 'false',
            isRed: false,
        Imglist: [],
        headerImg: "https://imgs.qunarzz.com/p/tts0/1808/69/3e35ac56ca1c0e02.jpg_750x440_147e1740.jpg",
         comment:'',
            show:false,//评论组件显示隐藏
            content:'',//评论内容，
            cid:0,//评论者id
        }

    },

    props:{
      list:""
    },
    methods: {
        // showstyle: function () {
        //     var iconCo = this.icon;
        //     this.icon = iconCo == '▶' ? '▼' : '▶';
        // },

        //点击显示放大图片
commen(id){
this.cid=id;
this.show=!this.show

   event.$emit('show', this.show)
// console.log(this.cid,this.show)
},

timestampToTime (cjsj) {
        var date = new Date(cjsj) //时间戳为10位需*1000，时间戳为13位的话不需乘1000
        var Y = date.getFullYear() + '-'
        var M = (date.getMonth()+1 < 10 ? '0'+(date.getMonth()+1) : date.getMonth()+1) + '-'
        var D = date.getDate() + ' '
        var h = date.getHours() + ':'
        var m = date.getMinutes() + ':'
        var s = date.getSeconds()
        return Y+M+D+h+m+s
// console.log(timestampToTime (1533293827000))
    },

   takedata(){
      var time=[];
      var list =this.list;

// console.log(list)
   },


        ShowbigImg: function (e) {
           ImagePreview({
  images: [
  e
  ],

});

        },
        //是否展示‘查看全文’提示
        clickshowcontent: function  () {
            this.ShowContent = this.ShowContent == '查看全文 ↓' ? '收起全文 ↑' : '查看全文 ↓';
            if($('.showcontent').hasClass('showcontent')){
                $('.item-desc').removeClass('showcontent');
            }else{
                $('.item-desc').addClass('showcontent');
            }
        },

        //获取可容纳文本的高度，当超过一定的高度的时候给省略
        getItemdescHeight: function () {
            var HeightLong = $('.item-desc').height();
           if(HeightLong > 42){
                this.ifShowContent = true;               //显示‘查看全文’提示
                $('.item-desc').addClass('showcontent'); //添加超过部分隐藏的类
           }else{
                 this.ifShowContent = false;
                 $('.item-desc').removeClass('showcontent');
           }
        },

        //点赞
        ClickDianzan: function (count,id) {
          var that =this
          var token =localStorage.getItem('token');
          // console.log(count)
            that.DianzanNum=count;
            that.dataStatus = that.dataStatus == 'false' ? 'true' : 'false'; // 设置一个data 属性状态 false 、 true
            that.DianzanNum = that.dataStatus == 'true' ? that.DianzanNum + 1 : that.DianzanNum - 1 ;  // 根据 data 状态 来 增加或者减去点赞数量
            var isred = that.isRed; //根据 isred 的 状态 添加 class 高亮显示
            if(isred == false){
                that.isRed = true;
            }else{
                that.isRed = false;
            }
            axios.post('/api/publish/follow',{
              id:id
            },
            {

headers: { 'Authorization': 'Bearer ' + token}

            }
            ).then(response=>{
              // console.log(response)
              var status =response.data.status;
              if(status==0){
                var count =1
                 event.$emit('count', count)

              }
            })
        }

    },
    mounted () {
      // console.log(this.list)
        this.getItemdescHeight();

      this.takedata();
    // console.log(this.timestampToTime(1533293827000))
event.$on('show', (data) => {
        // console.log(data)
        this.show=data
      })
    },
    computed: {
        showSwiper () {
        return this.Imglist.length
        }
    }
}
</script>

<style lang="stylus" scoped>
.coms{position: fixed;top: 50%;left: 1%;width: 100%;z-index: 9999}

.Infomation{height :100%;width:100%;  }



.top{background-color:#259E7B; padding:10px 0;display: flex;}
.InfoClassify select{
    background: #259E7B;
    border-color: #97D2C0;
    border-radius: 5px;
    padding: 5px 0px;
    margin: 0 10px;
    color: #fff;
    font-size: 14px;
}
.Search{width: 75%;}
.top .left-icon{padding: 0 8px; font-size: 20px;color: #ffffff; width: 45px;}
.right-icon{padding: 0 10px;color: #ffffff;font-size: 22px;}
.top .van-tabbar-item__icon{font-size: 22px; margin: 3px 10px; color:#fff}
.van-search{padding:0}
.van-search .van-cell{background: #97D2C0; border-radius: 0; color:#ffffff}
.swiper-container-horizontal{height:200px;}
.wrapper .img{width:100%;}

/*** 详情列表 **/
.Infomation {padding: 10px;}

.item-header, .item-remark, .item-img  {display:flex;}
.item-header .item-header-rightdot{ position: absolute; right: 15px; text-align: center;}
.item-header .item-header-logo{width:60px; height:60px; }
.item-header .item-header-logo img{width:60px; height:60px;border-radius: 50%;}
.item-header-namedata {padding: 8px 15px;}
.item-header-namedata .name{ font-size:13px; font-weight: bold;}
.item-header-namedata .data{margin-top: 5px; color: #B6B6B6;}
.nianji{font-size:14px;}
.dangban{
    margin-top: 5px;
    color: #fff;
    background: #259E7B;
    padding: 1px 15px;
    border-radius: 16px;
}

.item-desc{ margin: 10px 0;font-size: 14px;}
.showcontent{
    text-overflow: -o-ellipsis-lastline;
  overflow: hidden;
  text-overflow: ellipsis;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  line-clamp: 2;
  -webkit-box-orient: vertical;
}
.info-item  {margin-top:60px;}
.info-item:first-child{margin-top:10px;}
.info-item .item-img .item-imglist{width:33%; margin: 0 2px;}
.info-item .item-img .item-imglist img{max-width:100%;}
.item-remark{float: right;padding:10px; font-size: 14px;color: #B6B6B6;}
.item-remark .van-icon{ margin-right:5px;}
.red{color:red;}

/** 评论回复区 */
.item-commentreply {border-radius: .5rem; padding: .5rem;  width: 100%; display: inline-block; background:#eeeeee}
</style>
